

<template>
    <el-container>
        <el-header>
            <el-steps :active="step" align-center>
                <el-step title="步骤1" description="验证密码"></el-step>
                <el-step title="步骤2" description="发送验证码"></el-step>
                <el-step title="步骤3" description="确认验证码"></el-step>
                <el-step title="步骤4" description="输入新密码"></el-step>
            </el-steps>
        </el-header>
        <el-main>
            <div class="main" v-if="step === 1">
                <el-input class="typee" v-model="oldPassword" placeholder="输入旧密码"></el-input>
                <el-button type="primary" @click="goTwo()">下一步</el-button>
            </div>
            <div class="main" v-if="step === 2">
                <el-input class="typee" v-model="emailfrom.email" placeholder="输入账号绑定的邮箱"></el-input>
                <el-button type="primary" @click="goThree()">下一步</el-button>
            </div>
            <div class="main" v-if="step === 3">
                <el-input class="typee" v-model="code" placeholder="输入验证码"></el-input>
                <el-button type="primary" @click="goFinall()">下一步</el-button>
            </div>
            <div class="main" v-if="step === 4">
                <el-row>
                    <el-input class="typee" v-model="newPassword" type="password" 
                    placeholder="密码长度不小于5位"/>
                </el-row>
                <el-row>
                    <el-input class="typee" v-model="fosurepassword" type="password" placeholder="确认密码"/>
                </el-row>
                <el-button type="primary" @click="Commit()">提交</el-button>
            </div>
        </el-main>
    </el-container>


    
</template>
<script>
import api from '@/api/password'
  export default {

    data() {
      return {
        step: 1,
        oldPassword:'',
        emailfrom:{email:''},
        code:'',
        newPassword:'',
        fosurepassword:'',


      }
    },
    mounted() {

    },
    methods: {
        goTwo(){
            api.PasswordIsRight(this.oldPassword).then(resp => {
                if(resp.data = true){
                    this.step = 2
                }
            })
        },
        goThree(){
            if (this.checkemail() == false) {
            return false;
            }
            api.getCaptcha(this.emailfrom).then(resp => {
            })
            this.step = 3
        },
        goFinall(){
            api.CodeIsRight(this.emailfrom.email,this.code).then(resp => {
                if(resp.data = true){
                    this.step = 4
                }
            })
        },
        Commit(){
            if (this.newPassword === '') {
                this.$message.error("请输入密码");
              }else if(this.newPassword.length<5) {
                this.$message.error("密码不得少于五位");
              }  
              else if (this.fosurepassword === '') {
                this.$message.error("请再次输入密码");
              } else if (this.newPassword !== this.fosurepassword) {
                this.$message.error("两次输入密码不一致");
              } else {
                api.CodeIsRight(this.newPassword).then(resp => {
                    if(resp.data = true){
                        this.close()
                    }
                })
              }
        },
        close(){
            window.close();
        },
        checkemail() {
            let email = this.emailfrom.email;
            if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)) {
            this.$message.error("请填写正确的邮箱号");
            return false;
            }
        }

        
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .main{
    padding: 310px;
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
  }
  .typee{
    margin-right: 20px;
    width: 250px;
  }
  </style>
  